

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/shop/shop.css">
    <style>
        body{
            font-family: 楷体;
            margin: 0;
        }
        #title{
            top: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 52px;
            width: 300px;
            border: 1px solid black;
            position: relative;
            margin: 0 auto;
            border-bottom-left-radius: 20px;
            /*border-bottom-right-radius: 20px;*/
            border-top-right-radius: 20px;
            box-shadow: 5px 5px 4px black;
        }
        .product_shop{
            position: relative;
            width: 1400px;
            height: 500px;
            margin: 20px auto;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
            /*border: 1px solid black;*/
            /*box-shadow: 0px 20px 10px black;*/
        }
        .shop_1 {
            top: 80px;
            display: inline-block;
            position: relative;
            width: 300px;
            height: 350px;
            left: 5px;
            /*border: 1px solid black;*/
            margin: 20px 20px;
            box-shadow: 10px 20px 10px black;
            /*overflow: hidden;*/
        }
        .shop_1 img{
            position: relative;
            width: inherit;
            height: inherit;
            z-index: 100;
            transition-duration: 2s;
        }
        .shop_1 img:hover{
            transform: rotateY(90deg);
        }
        .shop_p{
            display: inline-block;
            position: relative;
            /*background-color: rgba(0,0,0,1);*/
            /*display: none;*/
            width: inherit;
            height: inherit;
            top: -365px;
        }
        #divLimit{
            position: relative;
            width: 600px;
            height: 100px;
            /*background-color: black;*/
            margin: 0 auto;
        }
        #divLimit ul{
            position: relative;
            list-style-type: none;
            margin: 0 auto;
            top: 50px;
        }
        #divLimit li{
            position: relative;
            float: left;
            margin: auto 30px;
        }
        #divLimit a{
            color: black;
            font-size: 24px;
            text-decoration: none;
        }
        #divLimit a:visited{
            color: black;
        }
        #divLimit a:hover{
            color: darkorange;
        }
        #divheader{
            position: relative;
            width: 600px;
            height: 100px;
            /*background-color: black;*/
            margin: 0 auto;
        }
        #divheader ul{
            position: relative;
            list-style-type: none;
            margin: 0 auto;
            top: 100px;
        }
        #divheader li{
            position: relative;
            float: left;
            margin: auto 30px;
        }
        #divheader a{
            color: black;
            font-size: 24px;
            text-decoration: none;
        }
        #divheader a:visited{
            color: black;
        }
        #divheader a:hover{
            color: darkorange;
        }
    </style>
</head>
<body>
<div id="header">
    <img class="i1" src="jp/捕获1.PNG" alt="">
    <div id="logo">
        <h1> <a  class="a2"  href="/index.html">A.S Hair Salon
        </a>

        </h1>
    </div>
    <div id="login_reg">
        <a  href="#" @click="fn1()">退出</a>
    </div>
</div>
<div id="mian">
    <div id="title">作品列表</div>
    <div id="divheader">
        <ul>
            <li><a href="#">全部</a></li>
            <li><a href="#">短发</a></li>
            <li><a href="#">长发</a></li>
            <li><a href="#">烫发</a></li>
            <li><a href="#">染发</a></li>
        </ul>
    </div>
    <div class="product_shop">
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
    </div>
    <div class="product_shop">
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
    </div>
    <div class="product_shop">
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
    </div>
    <div class="product_shop">
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
        <div class="shop_1"><img src="yhf/图5.webp"/><div class="shop_p"><p>title</p><p>content</p></div></div>
    </div>

    <div id="divLimit">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">尾页</a></li>
        </ul>
    </div>
</div>
<div id="footer">
    <div class="foot_t">
        <div id="zuo_boby">
            <h2 id="ft_title">A.S Hair Salon</h2>
            <p>Lorem Ipsum is simply text the printing and<br>typesetting standard industry.
                Onec Consequat<br> sapien ut cursus rhoncus. Nullam dui mi,<br> vulputate ac metus.
            </p>
            <h3>Trusted by<span style="color: orange">500+ People</span></h3>
            <img src="jp/微信.webp" alt="" class="tubiao">
            <img src="jp/qq.webp" alt="" class="tubiao">
        </div>
    </div>
    <div class="foot_t">
        <div id="mid_boby">
            <h4>Quick Links</h4>
            <ul>
                <li><a href="manager/manager.html" class="lianjie">>>&nbspManager</a></li>
                <li><a href="wdh/页面.html" class="lianjie">>>&nbspDesigner</a></li>
                <li><a href="yhf/myproject.html" class="lianjie">>>&nbspPicture</a></li>
                <li><a href="shop.html" class="lianjie">>>&nbspProduct</a></li>
                <li><a href="ll/qwe.html" class="lianjie">>>&nbspContact Us</a></li>
            </ul>
        </div>
    </div>
    <div class="foot_t">
        <div id="you_boby">
            <h4>Contact Info</h4>
            <p id="id1">地址:90 nsequursu dsdesdc, xxx Honey Street 049436.Newyork, NY.</p>
            <p id="id2">电话:+1(12) 123 456 789</p>
            <p id="id3">座机:+1(12) 123 456 789</p>
            <p><a href="" class="lianjie">邮箱:123456789@qq.com</a></p>
        </div>
    </div>
</div>
</div>
</body>
<script src="js/header.js"></script>
</html>